<!-- 轮播就像放电影，一张图片大小的固定光源，拉动排成一排的图片 -->
<template>
  <section class="scrollPane">
    <div id="focus">
      <ul class="focusUl" v-on:mouseover="stopPic" v-on:mouseout="showPic">
        <li v-for="(scroll, scrollIndex) in scrolls" v-show="scrollIndex==showIndex">
          <img :src="getImgUrl(scroll.cmdetail)">
        </li>
      </ul>
      <div class="focusSpanPane">
        <div class="focusSpan">
          <span v-for="(span,spanIndex) in spans" v-on:mouseover="changePic(spanIndex)">
            <div class="spanContent"/>
          </span>
        </div>
        <div class="focusSpanCover">

        </div>
      </div>
    </div>
  </section>
</template>

<script>
import api from "../../../../axios/api.js"
import $ from 'jquery'
export default {
  name: "scroll",
  data() {
    return {
      timer: {},
      scrolls: [],
      showIndex: 0, //需要显示的图片的编号，默认第一张
      size: 0,
      width: 0,
      spans: [],//存放控制点的数组
    }
  },
  methods: {
    getImgUrl: function (imgsrc) {
      return "../../../../../static/images/scroll/" + imgsrc;
    },
    getScrollData: function () {
      api.setDataFromAxios("/scrollData", null, "get", null).then(
        //默认返回就是response对象
        dto => {
          this.scrolls = dto.tList;
          this.size = $(this.scrolls).size();
          this.width = $("#focus").width();
          $(".focusUl").width(this.size * this.width);//动态根据图片大小和数量设置ul宽度
          this.initSpan();
          this.showPic();
        }
      );
    },
    showPic: function () {//显示图片的方法 开启定时器
      this.timer = setInterval(() => {
        this.showIndex++;
        $(".spanContent").css("background", "#8e8787");//全部变灰
        $(".spanContent:eq(" + this.showIndex + ")").css("background", "white");//当前变白
        if (this.showIndex == this.size) {//如果下一张图片的索引等于了图片数量已经是最后一张回到第一张
          this.showIndex = 0
          $(".spanContent:eq(0)").css("background", "white");
        }

      }, 1000)//每隔一秒执行切换
    },
    changePic(spanIndex) {
      //alert(spanIndex)
      $(".spanContent").css("background", "#8e8787");
      this.showIndex = spanIndex;
      $(".spanContent:eq(" + spanIndex + ")").css("background", "white");
      this.stopPic();
    },
    //根据图片数量生成 控制点
    initSpan: function () {
      //console.log(scrolls);
      var spansHTML = "";
      for (var index = 0; index < this.scrolls.length; index++) {
        this.spans.push(this.scrolls[index].cmname);
      }
    },
    stopPic() {
      clearInterval(this.timer);
    }

  },
  created() {
    this.getScrollData();
  },
  watch: {//watch 用于监控当前页面的变量的值变化 如果直接调用方法是渲染前的界面，使用this.nextTick 中的方法才是渲染完成后调用
    spans: {
      handler(val, oldVal) {
        this.$nextTick(function () {
          $(".spanContent:eq(0)").css("background", "white");
        })

      },
      deep: true//打开深度监听
    },
  }
}
</script>

<style scoped lang="stylus">
.scrollPane
  width 1000px;
  margin 0 auto;
  height 280px;
  #focus
    width:1000px;
    overflow hidden;
    margin 0 auto;
    position relative;
    .focusUl
      margin 0
      padding 0
      li
        list-style-type none;
        float left;
        img
          width 1000px;
          height 280px;
      &:after
        clear both
        content ''
        display block
    .focusSpanPane
      position absolute;
      bottom 10px;
      width 100%;
      height 20px;
    .focusSpanCover
      width 100%
      height 20px;
      background-color black;
      opacity 0.4;
      position absolute;
      top 0
      left 0
      z-index 3
    .focusSpan
      position relative
      margin 0 auto;
      height 20px;
      line-height 20px;
      z-index 4
      span
        display inline-block
        margin-left 10px;
        width 10px
        height 10px
        position relative
        .spanContent
          background-color #8e8787;
          width 10px
          height 10px
          border-radius 10px
          z-index 4

</style>
